<template>
  <div>
    <p class="filter"></p>
		<div class="addBox">
			<h3 class="fixTitle">
        <span>试题预览</span>
        <p>
          <em style="cursor: pointer;" @click="close"><svg-icon icon-class="cha" class="font-size16" /></em>
        </p>
      </h3>
      <div style="margin-top:40px;padding: 0 20px;">
        <div style="padding: 20px 0">
          <h2 class="text-c" style="font-weight:500;"><span>{{this.paperName}}</span></h2>
          <p  class="text-c" style="margin: 10px 0;" v-if="this.showMethod == 2">（总分：{{this.score}}分）</p>
        </div>
        <div  v-loading="listLoading" v-show="singleLength > 0">
          <h4 style="width: 600px; margin: 0 auto;">一、单选题(每小题有且只有一个正确答案，本题共{{this.singleNum}}小题<span  v-if="this.showMethod == 2">，每小题{{this.singleScore}}分，共{{this.singleAllScore}}分</span>)</h4>
          <ul style="width: 580px; margin: 0 auto;padding-bottom: 30px;">

            <li v-for="(item,index) in single" :key="index">
              <div class="c-f">
                <span>{{index+1}}、</span><div v-html="item.problem"></div>
              </div>
              <!-- <p class="m10" v-html="(index +1)+'、'+item.problem"></p> -->
              <div class="ml20 mh20">
                <div  v-show="item.optionA !=''" class="c-f" style="">
                  <span>A:</span><div class="c-m0" v-html="item.optionA"></div>
                </div>
                <div  v-show="item.optionB !=''" class="c-f" style="">
                  <span>B:</span><div class="c-m0" v-html="item.optionB"></div>
                </div>
                <div  v-show="item.optionC !=''" class="c-f" style="">
                  <span>C:</span><div class="c-m0" v-html="item.optionC"></div>
                </div>
                <div  v-show="item.optionD !=''" class="c-f" style="">
                  <span>D:</span><div class="c-m0" v-html="item.optionD"></div>
                </div>
              </div>
              <p class="ml20">答案：{{item.answer}}</p>
              <div class="clearfix ml20" v-if='item.analysis!= " " && item.analysis!= ""'>
                <span class="fl">解析：</span>
                <div class="fl" v-html="item.analysis"></div>
              </div>
            </li>

          </ul>
        </div>
        <div v-loading="listLoading" v-show="multiLength > 0">
          <h4 style="width: 600px; margin: 0 auto;">二、多选题(每小题有多个正确答案，本题共{{this.multiNum}}小题 <span v-if="this.showMethod == 2">，每小题{{this.multiScore}}分，共{{this.multiAllScore}}分</span>)</h4>
          <ul style="width: 580px; margin: 0 auto;padding-bottom: 30px;">


            <li v-for="(item,index) in multi" :key="index">
              <div class="c-f">
                <span>{{index+1}}、</span><div v-html="item.problem"></div>
              </div>
              <!-- <p class="m10" v-html="(index +1)+'、'+item.problem"></p> -->
              <div class="ml20 mh20">
                <div  v-show="item.optionA !=''" class="c-f" style="">
                  <span>A:</span><div class="c-m0" v-html="item.optionA"></div>
                </div>
                <div  v-show="item.optionB !=''" class="c-f" style="">
                  <span>B:</span><div class="c-m0" v-html="item.optionB"></div>
                </div>
                <div  v-show="item.optionC !=''" class="c-f" style="">
                  <span>C:</span><div class="c-m0" v-html="item.optionC"></div>
                </div>
                <div  v-show="item.optionD !=''" class="c-f" style="">
                  <span>D:</span><div class="c-m0" v-html="item.optionD"></div>
                </div>
                <div  v-show="item.optionE !=''" class="c-f" style="">
                  <span>E:</span><div class="c-m0" v-html="item.optionE"></div>
                </div>
                <div  v-show="item.optionF !=''" class="c-f" style="">
                  <span>F:</span><div class="c-m0" v-html="item.optionF"></div>
                </div>
              </div>
              <p class="ml20">答案：{{item.answer}}</p>
              <div class="clearfix ml20" v-if="item.analysis!=''&&item.analysis!=' '">
                <span class="fl">解析：</span>
                <div class="fl" v-html="item.analysis"></div>
              </div>
            </li>

          </ul>
        </div>

      </div>
		</div>
  </div>
</template>
<script>
import { toGetPaperDetail } from '@/api/paper'
export default {
  props: [
    'paperId',
    'paperNum'
  ],
  data() {
    return {
      paperData: [
        {
          totalScore: 100
        }
      ],
      listLoading: false,
      multi: null,
      single: null,
      singleScore: null,
      multiScore: null,
      singleAllScore: null,
      multiAllScore: null,
      singleNum: null,
      multiNum: null,
      singleLength: null,
      multiLength: null,
      paperName: null,
      score: null,
      showMethod: 1
    }
  },
  created() {
    this.getPaperDetail()
  },
  methods: {
    close() {
      this.$emit('hidePreview', false)
    },
    getPaperDetail() {
      this.listLoading = true
      if (this.paperId) {
        toGetPaperDetail(this.paperId).then(res => {
          // 正确回调
          this.single = res.data.data.singleList
          this.multi = res.data.data.multiList
          this.singleLength = this.single.length
          this.multiLength = this.multi.length
          this.singleScore = res.data.data.singleScore
          this.multiScore = res.data.data.multiScore
          this.singleAllScore = res.data.data.singleAllScore
          this.multiAllScore = res.data.data.multiAllScore
          this.multiNum = res.data.data.multiNum
          this.singleNum = res.data.data.singleNum
          this.paperName = res.data.data.paperName
          this.score = res.data.data.score
          this.showMethod = res.data.data.showMethod
          this.listLoading = false
        })
          .catch(err => {
            console.log(err)
          })
      }
    }
  },
  mounted() {
  },
  watch: {
    paperId: {
      handler: function(val, oldval) {
        if (val != oldval) {
          this.getPaperDetail()
        }
      }
    },
    paperNum: {
      handler: function(val, oldval) {
        if (val != oldval) {
          this.getPaperDetail()
        }
      }
    }
  }

}
</script>
<style scoped>
  p,h3{ margin: 0;}
  .fixTitle{
    width: 800px;
  }
  .c-f{
    display:flex;flex-direction:row;align-items:center;
    padding: 10px 0;
  }
  .addBox {
		width: 800px;
		height: 500px;
		overflow: auto;
		background: #fff;
		position: fixed;
		left: 25%;
		top: 10%;
    z-index: 120;
  }
  .ml20{
    margin: 20px;
  }
  .ml20 p {
    margin: 10px 0;
  }
  .m10 {
    margin: 10px 0;
  }
  .p10 {
    padding: 10px 0;
  }
</style>
